﻿
<template>
<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">

<el-card shadow="hover" class="layout-padding-auto create-form" >
  <el-form ref="formRef" :model="stateData.vmModel" label-width="120px">
    
<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>关联信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_CodeRuleId_FormItem" prop="Entity.CodeRuleId"   :rules="[{ required: true, message:'编码规则为必填项',trigger:'blur'}]">
            <template #label>
                <WtmLabelTooltip label="编码规则" tooltip="关联的编码规则" />
            </template>
            <el-select v-model="stateData.vmModel.Entity.CodeRuleId" disabled clearable class="width100">
                       <el-option v-for="item in stateData.AllSysCodeRules" :key="item.Value" :value="item.Value" :label="item.Text"></el-option></el-select>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>编码信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_GeneratedCode_FormItem" prop="Entity.GeneratedCode"   :rules="[{ required: true, message:'生成编码为必填项',trigger:'blur'}]">
            <template #label>
                <WtmLabelTooltip label="生成编码" tooltip="生成的完整编码" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.GeneratedCode" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>业务信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_BusinessType_FormItem" prop="Entity.BusinessType"  >
            <template #label>
                <WtmLabelTooltip label="业务类型" tooltip="业务单据的类型" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.BusinessType" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>编码信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_SerialNumber_FormItem" prop="Entity.SerialNumber"   :rules="[{ required: true, message:'序号值为必填项',trigger:'blur'}]">
            <template #label>
                <WtmLabelTooltip label="序号值" tooltip="生成时使用的序号" />
            </template>
            <el-input-number v-model="stateData.vmModel.Entity.SerialNumber" disabled clearable class="width100"></el-input-number>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>时间信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_GenerateTime_FormItem" prop="Entity.GenerateTime"  >
            <template #label>
                <WtmLabelTooltip label="生成时间" tooltip="编码生成的时间" />
            </template>
            <el-date-picker v-model="stateData.vmModel.Entity.GenerateTime" disabled clearable class="width100"></el-date-picker>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>操作信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_Operator_FormItem" prop="Entity.Operator"  >
            <template #label>
                <WtmLabelTooltip label="操作人" tooltip="生成编码的操作人" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.Operator" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>其他</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_Remark_FormItem" prop="Entity.Remark"  >
            <template #label>
                <WtmLabelTooltip label="备注" tooltip="备注信息" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.Remark" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>系统设置</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_TenantCode_FormItem" prop="Entity.TenantCode"  >
            <template #label>
                <WtmLabelTooltip label="租户代码" tooltip="多租户系统中的租户唯一标识" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.TenantCode" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
  </el-row>

</div>


    <div style="text-align:right;">
      
     <WtmButton @click="onClose"  type="default" :button-text="$t('message._system.common.vm.cancel')" style="margin-top:15px;"/>
    </div>
  </el-form>

</el-card>

</div>
</template>


<script setup lang="ts" name="message._system.common.vm.edit;false">
import { reactive, ref, getCurrentInstance, onMounted, computed} from 'vue';
import { ElMessage } from 'element-plus';
import { SysCodeHistoryApi as api } from '/@/views/_admin/syscodehistory/api';
import other from '/@/utils/other';
import { useRouter } from "vue-router";
import { ISysCodeHistoryVm } from '/@/views/_admin/syscodehistory/api/interface';
import { IViewModel } from '/@/types/common';

const ci = getCurrentInstance() as any;
const loading = ref(false);
// 定义变量内容
const formRef = ref();
const stateData = reactive<IViewModel<ISysCodeHistoryVm>>({
    vmModel: {
	  Entity:{
			ID: null,
			CodeRuleId: null,
			GeneratedCode: null,
			BusinessType: null,
			SerialNumber: 0,
			GenerateTime: new Date(),
			Operator: null,
			Remark: null,
			TenantCode: null,

      },
      
	},
     
    AllSysCodeRules: [] as any[],
});

// 取消
const onClose = () => {
    closeDialog();
};



// 页面加载时
onMounted(() => {
	loading.value = true;
  if (ci.attrs["wtmdata"]) {
		stateData.vmModel.Entity.ID = ci.attrs["wtmdata"].ID;
	}
	else if (useRouter().currentRoute.value.query.id) {
		stateData.vmModel.Entity.ID = useRouter().currentRoute.value.query.id as any;
	}
	const promises : Promise<any>[] = [
    
    other.getSelectList('/api/SysCodeHistory/GetSysCodeRules',[],false).then(x=>{stateData.AllSysCodeRules = x}),

    api()
      .get(stateData.vmModel.Entity.ID ?? "")
      .then((data: any) => other.setValue(stateData.vmModel, data))
	];
	Promise.allSettled(promises).finally(() => {
		loading.value = false;
	});
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh','closeDialog']);
// 关闭弹窗
const closeDialog = () => {
    emit('closeDialog');
};
</script>